<template>
  <div>
    <div>* 平台分类数据已经由<a href="//spider.beijingzhuyou.com" target="_blank">专有爬虫</a>接管</div>
    <el-form label-width="80px">
      <el-form-item label="平台">
        <el-radio-group v-model="selectedPlatform" @change="formChange">
          <el-radio-button :label="0">全平台</el-radio-button>
          <template v-for="p in platforms">
            <el-radio-button :label="p.id">{{p.name}}</el-radio-button>
          </template>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择日期">
        <el-date-picker v-model="date" @change="formChange"/>
      </el-form-item>
    </el-form>

    <div class="page">
      <el-pagination
              background
              layout="prev, pager, next"
              :page-size="20"
              :current-page.sync="currentPage"
              :total="page.total">
      </el-pagination>
    </div>

    <el-table :data="list" @sort-change="sortChange" border stripe :default-sort="sort" v-loading="loading">
      <el-table-column prop="rank" label="排名" width="60px"/>
      <el-table-column prop="platform.name" label="平台" v-if="selectedPlatform === 0"/>
      <el-table-column prop="type.name" label="直播类型"/>
      <el-table-column prop="num_active" label="活跃主播数量" sortable/>
      <el-table-column prop="num_new" label="新增主播数量" sortable/>
      <el-table-column prop="num_open" label="开播主播数量" sortable/>
      <!--<el-table-column prop="num_gift" label="礼物价值" sortable/>-->
      <el-table-column prop="num_watch" label="观看人气" sortable/>
      <!--<el-table-column prop="num_follower" label="关注人数" sortable/>-->
    </el-table>

    <div class="page">
      <el-pagination
              background
              layout="prev, pager, next"
              :page-size="20"
              :current-page.sync="currentPage"
              :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'spiderTypeData',
    props: ['platforms'],
    data() {
      return {
        loading: true,
        selectedPlatform: 0,
        date: new Date(),
        list: [],
        page: {current: 0, total: 0},
        sort: {prop: 'num_active', order: 'descending'},
      };
    },
    methods: {
      sortChange(sort) {
        this.list.length = 0;
        this.sort = sort;
        this.getData();
      },
      formChange() {
        this.page.current = 0;
        this.getData();
      },
      async getData() {
        this.loading = true;
        const res = await this.$asyncHttp.get(
            '/api/spider/platform/' + this.selectedPlatform + '/' + this.date.getTime(),
            {params: {page: this.page.current, prop: this.sort.prop, order: this.sort.order}});
        if (res instanceof Error)
          return this.$alert(res.message, {type: 'error'});
        this.list = res.data.list;

        if (parseInt(this.selectedPlatform) === 0)
          this.list.forEach((item, index) => {
            item.rank = this.page.current * 20 + 1 + index;
          });

        this.page.total = res.data.total;
        this.loading = false;
      },
    },
    computed: {
      currentPage: {
        get: function() {
          return this.page.current + 1;
        },
        set: function(val) {
          if (this.page.current === (val - 1))
            return;
          this.page.current = val - 1;
          this.getData();
        },
      },
    },
    mounted() {
      this.getData();
    },
  };
</script>

<style scoped>
  .page {
    margin: 10px 0;
  }
</style>